<template>
    <el-container style="height: 100vh;background-color: #d6d8d8;">
        <!-- 侧边栏 -->
        <el-aside class="aside" :width="sideWidth + 'px'" >
            <Aside :isCollapse="isCollapse" :logoTextShow="logoTextShow"/>
        </el-aside>
        <el-container>
            <!-- 头部 -->
            <el-header style="border-bottom: 1px solid #ccc;background-color: rgb(238, 241, 246); box-shadow: 2px 0 6px rgb(0 21 41 / 35%);">
                <Header :collapseBtnClass="collapseBtnClass" :collapse="collapse"/>
            </el-header>
            <!-- 主页面 -->
            <el-main>
                <!-- 路由出口 -->
                <router-view/>
            </el-main>
        </el-container>
    </el-container>
</template>

<script>


import Aside from "@/components/Aside.vue";
import Header from "@/components/Header.vue";

export default {
    name: 'Main',
    components: {
        Header,
        Aside,
    },
    data(){
        return {
            isCollapse:false, //控制侧边收缩
            logoTextShow:true, //后台管理文字隐藏
            collapseBtnClass:'el-icon-s-fold', //按钮切换图标
            sideWidth:200, //侧边宽度
        }
    },
    methods:{
        //侧边收缩
        collapse(){ //点击收缩按钮触发
            this.isCollapse = !this.isCollapse;
            if (this.isCollapse){  //收缩
                this.sideWidth = 84
                this.collapseBtnClass = 'el-icon-s-unfold'
                this.logoTextShow = false
            }else{ //展开
                this.sideWidth = 200
                this.collapseBtnClass = 'el-icon-s-fold'
                this.logoTextShow = true
            }
        },

    }
}
</script>

<style scoped>
.aside{
    height: 100vh;
    background-color:#545c64;
    /*隐藏垂直滚动条*/
    overflow-y: hidden;
    /*隐藏水平滚动条*/
    overflow-x: hidden;
}
.el-header{
    padding: 0;
}
</style>
